<div class="card-header  text-white" xmlns="http://www.w3.org/1999/html">
    <div class="input-group col-md-12 col-xl-6">
        <input type="text" class="form-control" id="searchName" placeholder="输入耗材名称进行搜索">
        <span class="input-group-btn">
			<button class="btn btn-secondary" type="button" id="searchNameBtn" >
				<i class="fa fa-search" aria-hidden="true"></i>
			</button>
		</span>
        <a th:if="${isBo}" class="btn btn-primary" data-toggle="modal" data-target="#flipFlop" role="button" id="addConsumable" th:title="耗材入库">
            <i class="fa fa-plus" aria-hidden="true"></i>
        </a>

    </div>
</div>

<div id="mainContainer" class="container" >
    <div id="mainContainerRepleace" class="row">
        <table class="table table-striped">
            <thead>
            <tr>
                <th data-field="consumableRepertoryId" >ID</th>
                <th data-field="consumableName">名称</th>
                <th data-field="consumableSpecifications">耗材规格</th>
                <th data-field="consumableCount">库存</th>
                <th data-field="consumablePrice">价格</th>
                <th data-field="totalPrice">总价格</th>
                <th th:if="${isBo}" data-field="operation">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="cr : ${consumableRepertories}">
                <th th:text="${cr.consumableRepertoryId}">...</th>
                <td th:text="${cr.consumableInfo.consumableName}">...</td>
                <td th:text="${cr.consumableInfo.consumableSpecifications}">...</td>
                <td th:text="${cr.consumableCount}">...</td>
                <td th:text="${cr.consumableInfo.consumablePrice}">...</td>
                <td th:text="${cr.consumableCount}*${cr.consumableInfo.consumablePrice}">...</td>
                <td th:if="${isBo}">
                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" id="outgoing" data-target="#flipFlop" data-th-attr="consumableId=${cr.consumableInfo.consumableId}" aria-hidden="true">出库</button>
                </td>
            </tr>
            </tbody>
        </table>
        <div th:replace="~{fragments/page :: page}">...</div>
    </div>
</div>
<!-- The modal -->
<div class="modal fade" id="flipFlop" tabindex="-1" role="dialog"
     aria-labelledby="flipFlop"  aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="consumableDialogTitle"></h4>
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close" id="consumableDialogClose">
                    <span aria-hidden="true" >&times;</span>
                </button>
            </div>
            <form id="consumableForm"></form>
        </div>
    </div>
</div>
<script src="../../js/consumables/repertories.js" th:src="@{/js/consumables/repertories.js}"></script>
